<template>
	<view class="wrap" :style="{
		paddingTop:statusBarHeight+'px'
	}">
		<u-navbar title="绿色消费" bgColor="#fff">
			<view class="u-nav-slot" slot="left">

			</view>

		</u-navbar>
		<view class="search-wrap">
			<view class="search">
				<image src="../static/imgs/index/search.png" mode="" class="search-icon"></image>
<!--				<view class="search-text" >-->
<!--					请输入想要搜索的商品-->
<!--				</view>-->
        <input type="text" placeholder="请输入想要搜索的商品" v-model:value="title">
				<view class="search-btn" @click="search">
					搜索
				</view>
			</view>
		</view>

		<view class="scroll-wrap">
			<scroll-view scroll-y="true" @scrolltolower="lowerBottom" class="scroll-view" style="height: 80vh">
				<view class="scroll-content">
					<view class="catefory-list">
						<view class="category-item" v-for="item in list1" :key='item.id' @tap="sanlian(item.id)">
							<image :src="item.icon" mode=""></image>
							<view class="">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="scene-wrap">
						<view class="scene-item" @tap="pintuan">
							<view class="scene-item-title">
								边逛边买<view class="look">
									抢先看
								</view>
							</view>

							<view class="scene-item-list">
								<view class="scene-circle-wrap">
									<view class="scene-circle">
										<image v-if="pictureList[0]" :src="$wanlshop.oss(pictureList[0].image, 60, 60)" mode=""
											class="scene-circle-img"></image>
									</view>
								</view>
								<view class="scene-circle-wrap">
									<view class="scene-circle">
										<image v-if="pictureList[1]" :src="$wanlshop.oss(pictureList[1].image, 60, 60)" mode=""
											class="scene-circle-img"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="scene-item kill-item" @tap="pintuan">
							<view class="scene-item-title">
								今日秒杀<view class="look">
									6.9元起
								</view>
							</view>

							<view class="scene-item-list">
								<image v-if="pictureList[2]" :src="$wanlshop.oss(pictureList[2].image, 60, 60)" mode="" class="killing-img">
								</image>
								<image v-if="pictureList[3]" :src="$wanlshop.oss(pictureList[3].image, 60, 60)" mode="" class="killing-img">
								</image>
							</view>
						</view>

					</view>

					<image :src="$wanlshop.oss('/uploads/20231017/0546d63e36cdb531ca1d0cef573d7796.png')"
						mode="widthFix" class="ad"></image>
					<view class="tabs-wrap scroll-container" ref="scrollContainer">
						<u-tabs :current="activeTabIndex" @change="change" :list="tabList" :activeStyle="{
							
            								color: '#E75D41',
			
											}" :itemStyle="{
												color: '#1B1B1B',
											fontSize: '32rpx',
											lineHeight:'42rpx',
											height:'74rpx',
											paddingLeft:'14rpx',
											paddingRight:'14rpx'
											}" lineColor="#E75D41">
						</u-tabs>
					</view>
					<wanl-product :dataList="likeList" dataType="goods" dataStyle="col-2-10" toType="special" />
					<!-- 底部提示 -->
					<uni-load-more :status="status" :content-text="contentText" @clickLoadMore="lowerBottom" />
				</view>
			</scroll-view>

		</view>

	</view>


</template>

<script>
	import {
		mapState
	} from 'vuex';
	const app = getApp()
	export default {
		components: {

		},
		computed: {
			...mapState(['common']),
			tabList() {

				return [{
						name: '推荐',
						id: 0
					},
					...this.common.modulesData.categoryModules,
				]
			},
		},
		data() {
			return {
				activeTabIndex: 0,
				dataList: [],
				searchText: "",
				statusBarHeight: app.globalData.statusBarHeight,
				current: 0,
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'more',
				contentText: {
					contentdown: '点击或上拉加载更多',
					contentrefresh: '疯狂加载中...',
					contentnomore: '没有更多商品了'
				},
				hasExecutedOnce: false,
				pictureList: [],
				list1: [{
					id: 1,
					icon: '/static/imgs/index/icon1.png',
					name: '清仓专区'
				}, {
					id: 2,
					icon: '/static/imgs/index/icon2.png',
					name: '超值拼团'
				}, {
					id: 3,
					icon: '/static/imgs/index/icon3.png',
					name: '签到领奖品'
				}, {
					id: 4,
					icon: '/static/imgs/index/icon4.png',
					name: '跟团买'
				}],
				likeList: [],
				title: ''
			}
		},
		onLoad(options) {

      if (options.scene){
        var scene = decodeURIComponent(options.scene);
        var temp = scene.split("&");
        var param = {};
        for (let tempKey in temp) {
          let arr = temp[tempKey].split("=");
          param[arr[0]] = arr[1];
        }
        console.log(param);
        if (param.user_id){
          uni.setStorageSync("userIds",param.user_id)
        }
      }

      if (options.user_id){
        uni.setStorageSync("userIds",options.user_id)
      }


			uni.setTabBarBadge({
				index: 1,
				text: '10'
			})
		},
		created() {
			this.itemId = 0
			this.getList();
			this.getdata();
		},
		mounted() {
			console.log(this.pictureList, 9088988);

		},
		methods: {
			lowerBottom() {
				console.log(999999999);
				if (this.status == 'noMore') {
					return;
				}
				this.current_page++;
				this.status = "loading"
				this.getList();
			},
			topList(id) {
				if (id == 1) {
					uni.switchTab({
						url: '/pages/find'
					});
				} else if (id == 2 || id == 4) {
					this.$wanlshop.to(`/pages/apps/groups/index`, 'fade-in', 100);
				} else if (id == 3) {
					this.$wanlshop.to(`/pages/user/signin/signin`, 'fade-in', 100);
				}
			},
			change(index) {
				this.itemId = index.id
			},
			removeTrailingZeros(number) {
				const decimalPart = (number % 1).toFixed(2).substring(2);
				return decimalPart;
			},
			toDetail(id) {
				this.$wanlshop.to(`/pages/product/detail?id=${id}`)
			},
			// 搜索
			search() {
				// this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${this.searchText}`, 'fade-in', 100);
        console.log(this.title)
        this.getList()
			},
			pintuan(){
				this.$wanlshop.to(`/pages/apps/groups/index`);
			},
			sanlian(item){
				// console.log(item)
				if(item == 3){
					this.$wanlshop.to(`/pages/user/signin/signin`);
				}else{
					this.$wanlshop.to(`/pages/apps/groups/index`);
				}
			},
			//跳转到发现
			find() {
				uni.switchTab({
					url: '/pages/find'
				});

			},

			spell() {
				this.$wanlshop.to(`/pages/apps/groups/index`, 'fade-in', 100);
			},
			async getList() {
        let filter = {}
        let op = {}

        if (this.title){
          filter = {
            ...filter,
            title:this.title
          }
          op = {
            ...op,
            title:'like'
          }
        }

				await uni.request({
					url: '/wanlshop/product/lists',
					data: {
						page: this.current_page,
            filter:filter,
            op:op,
					},
					success: res => {
						if (this.current_page === 1) {
							this.likeList = res.data.data;
						} else {
							this.likeList = this.likeList.concat(res.data.data);
						}
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						// 判断是否还有更多数据
						if (this.current_page < this.last_page) {
							this.status = 'more'; // 没有更多数据
						} else {
							this.status = 'noMore'; // 还有更多数据
						}

					}
				});
			},
			async getdata() {
				await uni.request({
					url: '/wanlshop/groups/product/recommend',
					data: {
						cid: this.itemId,
						page: this.current_page
					},
					success: res => {

						if (!this.hasExecutedOnce) {
							this.hasExecutedOnce = true;
							this.pictureList = res.data.data.slice(0, 4);
						}
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		background: #F7F7F7;
		height: 100%;
		.search-wrap {
			margin-top: 200rpx;
			padding: 16rpx 0 10rpx;
			background: #fff;

			.search {
				margin: 0 auto;
				width: 690rpx;
				height: 64rpx;
				border-radius: 30rpx;
				border: 2rpx solid #E25740;
				display: flex;
				align-items: center;
				padding: 0 6rpx 0 28rpx;
				box-sizing: border-box;
        justify-content: space-between;

				.search-icon {
					width: 30rpx;
					height: 28rpx;
				}

				.search-text {
					flex: 1;
					margin-left: 6rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #B9B8B8;
					line-height: 42rpx;
				}

				.search-btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 126rpx;
					height: 52rpx;
					background: #E25740;
					border-radius: 26rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 42rpx;
				}
			}
		}

		.scroll-wrap {
			position: relative;
			flex: 1;

			.scroll-view {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;

				.scroll-content {
					overflow: hidden;

				}
			}
		}

		.catefory-list {

			margin: 20rpx auto 0;
			width: 710rpx;
			height: 186rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 32rpx 32rpx 34rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.category-item {
				width: 92rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 92rpx;
					height: 82rpx;
				}

				view {
					white-space: nowrap;
					margin-top: 6rpx;
					font-size: 23rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #646464;
					line-height: 32rpx;
				}
			}
		}

		.scene-wrap {
			margin-top: 20rpx;
			display: flex;
			justify-content: center;

			.scene-item {
				margin: 0 6rpx;
				width: 348rpx;
				height: 236rpx;
				padding: 14rpx 0 0 0;
				background: url('@/static/imgs/index/bg.png') no-repeat;
				background-size: 348rpx 236rpx;

				&-title {
					padding-left: 20rpx;
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #050404;
					line-height: 44rpx;

					.look {
						margin-left: 6rpx;
						padding: 4rpx;
						height: 26rpx;
						background: #FB8227;
						border-radius: 4rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						display: flex;
						justify-content: center;
						align-items: center;

					}
				}

				&-list {
					margin-top: 6rpx;
					display: flex;
					justify-content: space-between;

					.scene-circle-wrap {
						box-sizing: border-box;
						border: 2rpx solid #FF5B63;
						padding: 14rpx;
						border-radius: 50%;

						.scene-circle {
							padding: 6rpx;
							box-sizing: border-box;
							border: 4rpx solid #FF5B63;
							border-radius: 50%;

							.scene-circle-img {
								width: 118rpx;
								height: 118rpx;
								border-radius: 50%;
							}
						}
					}
				}
			}

			.kill-item {
				.scene-item-list {
					margin-top: 18rpx;
					padding: 0 18rpx 0 22rpx;

					.killing-img {
						width: 138rpx;
						height: 138rpx;
						border-radius: 12rpx;
					}
				}
			}
		}

		.ad {

			margin: 18rpx auto 0;
			width: 708rpx;
			// height: 186rpx;
			background: #FFD8B4;
			border-radius: 60rpx;
			display: block;
		}

		.tabs-wrap {
			margin-top: 28rpx;
			padding-left: 6rpx;
		}

		.list {
			padding: 10rpx 15rpx 60rpx;
			display: flex;
			flex-wrap: wrap;

			.list-item {
				background: #fff;
				margin: 14rpx 5rpx 0;
				width: 350rpx;

				&-img {
					width: 100%;
					height: 346rpx;
				}

				&-name {

					padding: 14rpx 22rpx 0 16rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1B1B1B;
					line-height: 36rpx;

				}

				.copoun-wrap {
					display: flex;
				}

				.copoun {

					margin-top: 12rpx;

					padding: 0 12rpx;
					height: 40rpx;
					border: 2rpx solid #E75D41;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					border-radius: 4rpx;
					color: #E75D41;
					line-height: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;

				}

				.price-wrap {
					margin-top: 6rpx;
					display: flex;
					justify-content: space-between;

					padding: 0 16rpx 0 14rpx;

					.price {
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #E75D41;
						line-height: 28rpx;

						view {
							display: inline-block;

						}

						.bigprice {
							font-size: 40rpx;
							line-height: 48rpx;
						}

						.smallprice {
							font-size: 28rpx;
						}
					}

					.salse {
						padding-top: 12rpx;
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #A1A1A1;
						line-height: 32rpx;
					}
				}
			}
		}
	}

	.list-item-name {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
</style>